<template>
  <div class="patient-card" @click="handleToPatientDetails">
    <div class="bed-num">
      <span class="badge" :style="{ background: data.careColor? data.careColor : '#ccc'}"></span>
      <span style="font-size:1vw" :style="{color:data.careColor}">{{ data.bedName }}</span>
    </div>
    <div class="base-info">
      <div style="padding-left: 15px; font-size: 1.2em; margin-bottom: 15px">
        {{ data.ptnName }}&nbsp;|&nbsp;{{ data.sex }}&nbsp;|&nbsp;{{ data.age }}岁
      </div>
      <div style="padding-left: 15px; padding-bottom: 10px">
        诊断信息：{{ data.diagnosis || '无'}}
      </div>
      <div style="padding-left: 15px; padding-bottom: 10px">病情状态：无</div>
      <div style="padding-left: 15px; padding-bottom: 10px">
        责任护士：{{ data.nurName }}
      </div>
      <div style="padding-left: 15px; padding-bottom: 10px">
        入院时间：{{ data.adTime }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

// {
//       adTime: "2023-03-21",
//       age: 73,
//       bedName: "7床",
//       careColor: "#FDFF75",
//       diagnosis: "肺肿瘤",
//       nurName: "陈欢",
//       ptnName: "甘*孙",
//       sex: "男",
//     }

const props = defineProps({
  patient: {
    type: Object,
    required: true,
  },
});

let data = ref({});

watch(
  () => props.patient,
  (val) => {
    data.value = val;
  },
  { immediate: true, deep: true }
);

function handleToPatientDetails() {
  router.push({
    path: "/patientDetails",
    query: props.patientInfo,
  });
}
</script>

<style lang="scss" scoped>
.patient-card {
  border: 1px solid #fff;
  display: flex;
  flex-direction: column;
  .bed-num {
    background: #E1EAFF;
    padding: 1vh 1vw;
    .badge {
      display: inline-block;
      width: 1.5vh;
      height: 1.5vh;
      border-radius: 50%;
      margin-right: 3vw;
    }
  }
  .base-info {
    flex: 1;
    background: #ffffff;
    padding: 2vh 0;
  }
}
</style>
